<template>
  <div class="transition-share-wrapper">
    <header-row :baby="curBabyData" style="margin-top: 22px;" />
    <radar-chart
      :listItem="shareItem"
      v-if="shareItem"
      :style="{ visibility: 'hidden' }"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as CONSTANTS from '@/constants/index'
import RadarChart from '@/components/RadarChart/Index'
import HeaderRow from '@/components/HeaderRow'

export default {
  props: {},
  components: { RadarChart, HeaderRow },
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
    }
  },
  computed: {
    ...mapGetters(['user', 'quiz']),
    isDev() {
      return process.env.NODE_ENV === CONSTANTS.VAR_NODE_ENV_DEV
    },
    currentBabyId() {
      if (!this.user) return null
      return this.user.currentBabyId
    },
    curBabyData() {
      if (!this.user) return null
      return this.user.currentBabyData
    },
    shareItem() {
      if (!this.quiz) return null
      return this.quiz.shareItem
    },
  },
  mounted() {},
  filters: {},
  watch: {
    shareItem: {
      immediate: true,
      deep: true,
      handler(v) {
        if (v) this.onShowImageModal()
      },
    },
  },
  methods: {
    async onShowImageModal() {
      if (!this.curBabyData) return

      const dialog = await this.$createDialog(
        () => import('./modules/ResultImageModal.vue'),
        {
          props: {
            nickname: this.curBabyData.nickName,
            head: this.curBabyData.head,
          },
          destroyOnClose: true,
          on: {
            success: (v) => {
              dialog.close()
            },
          },
        }
      )
    },
  },
}
</script>

<style lang="less" scoped>
.transition-share-wrapper {
  min-height: 100%;

  & > div:first-of-type {
    width: 88%;
    margin: 0 auto;
  }
}
</style>
